<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
 <script type="text/javascript" src="highcharts/js/highcharts.js"></script>
  <script type="text/javascript" src="highcharts/js/highcharts-3d.js"></script>

<script type="text/javascript" charset="utf-8">
$(function () {
	/*
	$.post("school_getDoCount.action",{},function(sclCount){
		var area=sclCount.area;
		var count=eval(area);
		//alert(count);
		var dept=sclCount.dept;
		var dept_count=eval(dept);
		//alert(dept_count);
		var equ_attCount=sclCount.equ_attCount;//考勤设备数量
		var equ_telCount=sclCount.equ_telCount;//亲情电话数量
		//地区==学校统计
		$("#sclCountbyArea").highcharts({
	        chart: {
	            type: "pie",
	            options3d: {
	                enabled: true,
	                alpha: 45,
	                beta: 0
	            }
	        },
	        credits: {
	            enabled : false,
	        },
			colors:
				["#7cb5ec", 
				"#90ed7d",
				"#f7a35c", 
				"#8085e9",
				"#f15c80", 
				"#e4d354",
				"#8085e8",
				"#8d4653",
				"#91e8e1"]
			,
	        title: {
	            text: "各地区学校统计"
	        },
	        tooltip: {
	          //  pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
	          formatter: function() {
          		  return "<b>"+ this.point.name +":<b>("+Highcharts.numberFormat(this.y, 0, ",") +"所)";
         }
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: "pointer",
	                depth: 35,
	                dataLabels: {
	                    enabled: true,
	                    format: "{point.name}:{point.percentage:.1f}%"
	                }
	            }
	        },
	        series: [{
	            type: "pie",
	            name: "所占比例",
	            data: count
	        }]
	    });
		//部门==学校统计
		$("#sclCountbyDept").highcharts({
	        chart: {
	            type: "pie",
	            options3d: {
	                enabled: true,
	                alpha: 45,
	                beta: 0
	            }
	        },
	        credits: {
	            enabled : false,
	        },
			colors:
				[
				"#90ed7d",
				"#f7a35c", 
				"#8085e9",
				"#f15c80", 
				"#e4d354",
				"#8085e8",
				"#8d4653",
				"#91e8e1"]
			,
	        title: {
	            text: "市场部门管辖学校统计"
	        },
	        tooltip: {
	          //  pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
	          formatter: function() {
          		  return "<b>"+ this.point.name +":<b>("+Highcharts.numberFormat(this.y, 0, ",") +"所)";
         }
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: "pointer",
	                depth: 35,
	                dataLabels: {
	                    enabled: true,
	                    format: "{point.name}:<br>{point.percentage:.1f}%"
	                }
	            }
	        },
	        series: [{
	            type: "pie",
	            name: "所占比例",
	            data: dept_count
	        }]
	    });
		$("#equCount").highcharts({
			 chart: {
				type: "column",
				 margin: [ 50, 50, 100, 80]
			 }, 
			 credits: {
		            enabled : false,
		        },
		        colors:
					["#91e8e1"]
				,
			 title: { 
				 text: "设备类型统计"
			 },
			 xAxis: { 
				 categories: [ "考勤设备", "亲情电话" ]
				 //labels: {   设置字体倾斜
				//	 rotation: -45, 
				//	 align: "right", 
				//	 style: { 
				//		 fontSize: "13px",
				//		 fontFamily: "Verdana, sans-serif" }
				//	 }
			},
			 yAxis: {
				 min: 0,
				 title: { 
					 text: "设备数量"
				 } 
			}, 
			 legend: { 
				 enabled: false 
			},
			 tooltip: { 
				 pointFormat: "<b>{point.y} </b>"
			 }, 
			 series: [{ 
				 name: "Population", 
				 data: [equ_attCount, equ_telCount], 
				 dataLabels: { 
				 enabled: true,
				 rotation: 0, 
				 color: "black",
				 align: "center", 
				 verticalAlign:"top",
				 x: 0, 
				 y:-20, 
				 style: {
				 fontSize: "13px", 
				 fontFamily: "Verdana, sans-serif",
				 textShadow: "0 0 3px black" } 
			 }
			 }] 
		});
	},"json");
	  */
	  
	  
	  $.post("school_getReport.action",{},function(data){
		  var stuOpenNumArr = eval(data.stuOpenNum);
		  
		  var taocanNumArr = eval(data.taocanNum);
		  var stuAllNum = eval(data.stuAllNum);
		  
		  var dept = eval(data.dept);
		  var deptNum = eval(data.deptNum);
		  /* 在校生开通人数、毕业生开通人数   stuInOutOpenNum*/
		  	$("#stuInOutOpenNum").highcharts({
	        chart: {
	            type: "pie",
	            options3d: {
	                enabled: true,
	                alpha: 45,
	                beta: 0
	            }
	        },
	        credits: {
	            enabled : false,
	        },
			colors:
				["#7cb5ec", 
				"#90ed7d",
				"#f7a35c", 
				"#8085e9",
				"#f15c80", 
				"#e4d354",
				"#8085e8",
				"#8d4653",
				"#91e8e1"]
			,
	        title: {
	            text: "在校生、毕业生开通人数"
	        },
	        tooltip: {
	          //  pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
	          formatter: function() {
          		  return "<b>"+ this.point.name +":<b>("+Highcharts.numberFormat(this.y, 0, ",") +"人)";
         }
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: "pointer",
	                depth: 35,
	                dataLabels: {
	                    enabled: true,
	                    //format: "{point.name}:{point.percentage:.1f}%"
	                    format: "{point.name}:<br>{point.percentage:.1f}%"
	                }
	            }
	        },
	        series: [{
	            type: "pie",
	            name: "所占比例",
	            data: [
	                   ["在校生",stuOpenNumArr[0]],
	                   ["毕业生",stuOpenNumArr[1]]
	                   ]
	        }]
	    });
		  
		  	 /* 在校生各套餐分布情况 taocanNum  */
		  	 var tcArr = [];
		  if((taocanNumArr[0]==null || taocanNumArr[0]==0) && (taocanNumArr[1]==null || taocanNumArr[1]==0) && (taocanNumArr[2]==null || taocanNumArr[2]==0) && (taocanNumArr[3]==null || taocanNumArr[3]==0) ){
			  tcArr=[];
		  } else{
			  tcArr = [
		               ["A套餐",taocanNumArr[0]],
		               ["B套餐",taocanNumArr[1]],
		               ["C套餐",taocanNumArr[2]],
		               ["D套餐",taocanNumArr[3]]
		               ];
		  }
			   $("#taocanAllNum").highcharts({
		        chart: {
		            type: "pie",
		            options3d: {
		                enabled: true,
		                alpha: 45,
		                beta: 0
		            }
		        },
		        credits: {
		            enabled : false,
		        },
				colors:
					["#7cb5ec", 
					"#90ed7d",
					"#f7a35c", 
					"#8085e9",
					"#f15c80", 
					"#e4d354",
					"#8085e8",
					"#8d4653",
					"#91e8e1"]
				,
		        title: {
		            text: "在校生各套餐分布情况"
		        },
		        tooltip: {
		          //  pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
		          formatter: function() {
	          		  return "<b>"+ this.point.name +":<b>("+Highcharts.numberFormat(this.y, 0, ",") +"人)";
	         }
		        },
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: "pointer",
		                depth: 35,
		                dataLabels: {
		                    enabled: true,
		                    //format: "{point.name}:{point.percentage:.1f}%"
		                    format: "{point.name}:<br>{point.percentage:.1f}%"
		                }
		            }
		        },
		        series: [{
		            type: "pie",
		            name: "所占比例",
		            data: tcArr
		        }]
		    });
			  
		  
		  /* 在校生人数、在校生开通人数、毕业生人数、毕业生开通人数 stuAllNum */
		  $("#stuAllNum").highcharts({
			 chart: {
				type: "column",
				 margin: [ 50, 50, 100, 80]
			 }, 
			 credits: {
		            enabled : false,
		        },
		        colors:
					["#91e8e1"]
				,
			 title: { 
				 text: "在校生及毕业生人数及开通情况"
			 },
			 xAxis: { 
				 categories: [ "在校生<br>人数", "在校生<br>开通人数" ,"毕业生<br>人数","毕业生<br>开通人数"]
				 //labels: {   设置字体倾斜
				//	 rotation: -45, 
				//	 align: "right", 
				//	 style: { 
				//		 fontSize: "13px",
				//		 fontFamily: "Verdana, sans-serif" }
				//	 }
			},
			 yAxis: {
				 min: 0,
				 title: { 
					 text: "人数"
				 } 
			}, 
			 legend: { 
				 enabled: false 
			},
			 tooltip: { 
				 pointFormat: "<b>{point.y} </b>"
			 }, 
			 series: [{ 
				 name: "Population", 
				 data: stuAllNum, 
				 dataLabels: { 
				 enabled: true,
				 rotation: 0, 
				 color: "black",
				 align: "center", 
				 verticalAlign:"top",
				 x: 0, 
				 y:-20, 
				 style: {
				 fontSize: "13px", 
				 fontFamily: "Verdana, sans-serif",
				 textShadow: "0 0 3px black" } 
			 }
			 }] 
		});
		  
		  /* 各部门截止当前开通人数 deptOpenNum */
		   $("#deptOpenNum").highcharts({
			 chart: {
				type: "column",
				 margin: [ 50, 50, 100, 80]
			 }, 
			 credits: {
		            enabled : false,
		        },
		        colors:
					["#91e8e1"]
				,
			 title: { 
				 text: "各部门截止当前开通人数"
			 },
			 xAxis: { 
				 categories: dept
				 //labels: {   设置字体倾斜
				//	 rotation: -45, 
				//	 align: "right", 
				//	 style: { 
				//		 fontSize: "13px",
				//		 fontFamily: "Verdana, sans-serif" }
				//	 }
			},
			 yAxis: {
				 min: 0,
				 title: { 
					 text: "开通人数"
				 } 
			}, 
			 legend: { 
				 enabled: false 
			},
			 tooltip: { 
				 pointFormat: "<b>{point.y} </b>"
			 }, 
			 series: [{ 
				 name: "Population", 
				 data: deptNum, 
				 dataLabels: { 
				 enabled: true,
				 rotation: 0, 
				 color: "black",
				 align: "center", 
				 verticalAlign:"top",
				 x: 0, 
				 y:-20, 
				 style: {
				 fontSize: "13px", 
				 fontFamily: "Verdana, sans-serif",
				 textShadow: "0 0 3px black" } 
			 }
			 }] 
		});
		  
	  },"json");
});

</script>

<%-- 
<div id="sclCountbyArea" style="width:400px;height:400px;float:left;"></div>
<div id="sclCountbyDept" style="width:360px;height:400px;float:left;"></div>
<div id="equCount" style="width:400px;height:400px;float:left;"></div> 
--%>
<div style="width:100%;">
<div id="stuInOutOpenNum" style="width:45%;height:350px;float:left;"></div>
<div id="taocanAllNum" style="width:45%;height:350px;float:left;"></div>
<div id="stuAllNum" style="width:450px;height:360px;float:left;"></div>
<div id="deptOpenNum" style="width:450px;height:360px;float:left;"></div>

</div>